<template>
  <div id="app">
    <div><label class="label">我是父亲页面</label></div>
    <div>
      我是父亲的页面我收到了来自一号儿子的：<span class="text">{{
        this.msg
      }}</span>
    </div>
    <div class="a">
      <input v-model="test" />
      <button @click="submit">传递数据</button>
    </div>

    <One :data="this.data" @send="getData"></One
    ><!--:data='test' 父传子的过程 --><!-- @send='getData'子传父的过程 -->

    <Two></Two>
    <Three></Three>
  </div>
</template>

<script>
import One from './components/one.vue';
import Two from './components/two.vue';
import Three from './components/three.vue';
export default {
  name: 'app',
  data() {
    return {
      //父传子的数据
      test: '',
      msg: '',
      zhanshi: false /*进来先不展示儿子1  */,
      data: '',
    };
  },
  components: {
    One,
    Two,
    Three,
  },
  methods: {
    /*子传父的接受过程*/
    getData(data) {
      this.msg = data;
    },
    submit() {
      this.data = this.test;
    },
  },
};
</script>
<style>
#app {
  height: 500px;
  color: rgb(17, 118, 250);
  /* border: 1px solid black;  */
}

.a {
  margin-bottom: 100px;
}
.label {
  color: rgb(255, 2, 234);
}
.text {
  color: rgb(175, 43, 3);
}
</style>
